<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="660px"
    @open="handleDialogOpen()"
    v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :model="checkItemModel"
      ref="checkItemForm"
      :rules="dialogProps.action === 'add' ? addRules : editRules"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目编号" prop="code">
            <el-input :maxlength="32" v-model="checkItemModel.code" autofocus></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名" prop="name">
            <el-input :maxlength="32" v-model="checkItemModel.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="助记名" prop="mnemonicName">
            <el-input :maxlength="32" v-model="checkItemModel.mnemonicName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格" prop="price">
            <el-input :maxlength="32" v-model="checkItemModel.price" type='number'></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="适用年龄" prop="age">
            <el-input :maxlength="32" v-model="checkItemModel.age" placeholder="默认不限年龄"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="适用性别" prop="sex">
            <el-radio-group v-model="checkItemModel.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
              <el-radio label="0">不限</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目分类" prop="type">
            <el-select class="parent-router-select" v-model="checkItemModel.type" placeholder="请选择">
              <el-option label="检查项目" value="1"></el-option>
              <el-option label="检验项目" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="禁用" prop="affiliationClassify">
            <el-switch v-model="checkItemModel.affiliationClassify"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目说明" prop="remark">
            <el-input
              class="properties-textarea"
              type="textarea"
              :rows="3"
              v-model="checkItemModel.remark"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="注意事项" prop="attention">
            <el-input
              class="properties-textarea"
              type="textarea"
              :rows="3"
              v-model="checkItemModel.attention"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('checkItemForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveCheckItem, updateCheckItem } from "@/api/dingming/checkItem";

export default {
  name: "checkItem-edit",
  data() {
    /**
     * 表单验证 
     */
    var validateAge = (rule, value, callback) => {
      if (value === "" || value === undefined) {
        callback();
      } else {
        if (!value.replace(/[^\d]-[^\d]/, "")) {
          callback(new Error("格式应为：较小年龄-较大年龄"));
        }
        callback();
      }
    };
    return {
      loading: false,
      checkItemModel: {
        id: "",
        code: "",
        name: "",
        mnemonicName: "",
        sex: "0",
        age: "不限",
        price: "",
        affiliationClassify: false,
        type: "",
        remark: "",
        attention: "",
        createtime: "",
        updatetime: ""
      },
      dialogProps: {
        visible: false,   //控制对话框弹出收起
        action: "",       //存入add || edit
        title: ""         //存入对话框标题
      },
      /**
       * 添加的验证
       */
      addRules: {
        code: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
          { min: 3, max: 32, message: "长度在 3 到 32 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入项目名", trigger: "blur" },
          { min: 2, max: 32, message: "长度在 2 到 32 个字符", trigger: "blur" }
        ],
        age: [{ required: true, validator: validateAge, trigger: "blur" }],
        type: [
          { required: true, message: "请选择项目类别", trigger: "change" }
        ]
      },
      /**
       * 修改验证
       */
      editRules: {
        code: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
          { min: 3, max: 32, message: "长度在 3 到 32 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入项目名", trigger: "blur" },
          { min: 2, max: 32, message: "长度在 2 到 32 个字符", trigger: "blur" }
        ],
        age: [
          { required: true, validator: validateAge, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    /**
     * 点击确定按钮后判断是添加还是修改
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveCheckItem();
          } else {
            this.doUpdateCheckItem();
          }
        } else {
          return false;
        }
      });
    },
    /**
     * 修改的提交方法
     */
    doUpdateCheckItem() {
      this.loading = true;
      updateCheckItem(this.checkItemModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 添加的提交方法
     */
    doSaveCheckItem() {
      this.loading = true;
      saveCheckItem(this.checkItemModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 点击取消按钮
     */
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    /**
     * 弹框时触发的函数
     * 用来清除表单验证
     */
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["checkItemForm"].clearValidate();
      });
    },
    /**
     * 错误提示
     */
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  /**
   * 传入父组件的方法
   * 用来判断用户点击的按钮是删除还是添加
   */
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditCheckItemDialog", function(checkItem) {
        this.checkItemModel = checkItem;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改检查项";
        this.dialogProps.visible = true;
      }),
        this.$on("openAddCheckItemDialog", function() {
          this.checkItemModel = {};
          this.dialogProps.action = "add";
          this.dialogProps.title = "添加检查项";
          this.dialogProps.visible = true;
        });
    });
  }
};
</script>

<style lang="scss" scoped>
.parent-router-select {
  width: 100%;
}
.CheckItem-info-tab-pane {
  margin-top: 10px;
}
</style>





